<template lang="pug">
  MapInfo(:title="title" subTitle="情况")
    div.info-wrap
      StaticCompareView.info-item(v-for="(item, index) in infoData" :key="index"
        :itemData="item" :valueColor="valueColors[index]")
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "ModuleMapInfo",
  props:{
	rightTrend:{
		type:Array,
		required:false
	},
  },
  data() {
    return {
      infoData: [
        {
          label: '第二剂接种数',
          value: 0,
        },
        {
          label: '第一剂接种数',
          value: 0,
        },
      ],
	  cityName:'polygon-MangShi',
	  title:'芒市疫苗接种'
    }
  },
  computed: {
    valueColors() {
      return ['#F6652C', '#FFFFFF'];
    },
    ...mapGetters({
      polygon: 'map/polygon',
    }),
  },
  watch: {
    polygon: {
      handler(v) {
        this.handleMapAreaChange(v);
      },
      deep: true,
    },
	rightTrend: {
      handler(v) {
        this.zhenjiShu();
      },
      deep: true,
	}
  },
  methods: {
    handleMapAreaChange(polygon) {
	  var _this=this;
	  _this.cityName=polygon.id;
      console.log(polygon);
	  _this.zhenjiShu();
   //    const {name} = polygon.properties;
   //    this.$parent.area = name;
	  // this.area = name;
    },
	zhenjiShu(){
		var _this=this;
		let cityNameExt=_this.cityName;
		switch(cityNameExt){
			case 'polygon-MangShi':
				_this.title="芒市疫苗接种";
				_this.infoData[0].value=_this.rightTrend[0].F0000007;
				_this.infoData[1].value=_this.rightTrend[0].F0000006;
				break;
			case 'polygon-RuiLi':
				_this.title="瑞丽市疫苗接种";
				_this.infoData[0].value=_this.rightTrend[0].F0000011;
				_this.infoData[1].value=_this.rightTrend[0].F0000010;
				break;
			case 'polygon-YingJiang':
				_this.title="盈江县疫苗接种";
				_this.infoData[0].value=_this.rightTrend[0].F0000019;
				_this.infoData[1].value=_this.rightTrend[0].F0000018;
				break;
			case 'polygon-LiangHe':
				_this.title="梁河县疫苗接种";
				_this.infoData[0].value=_this.rightTrend[0].F0000023;
				_this.infoData[1].value=_this.rightTrend[0].F0000022;
				break;
			case 'polygon-LongChuan':
				_this.title="陇川县疫苗接种";
				_this.infoData[0].value=_this.rightTrend[0].F0000015;
				_this.infoData[1].value=_this.rightTrend[0].F0000014;
				break;
		}
	}
  },
  mounted() {
  	  this.zhenjiShu();
  }
}
</script>

<style lang="scss" scoped>
.map-info{
  position: absolute;
  bottom: rem(80);
  right: rem(100);
  .title{
    font-size: rem(30);
    color: #FFFFFF;
  }
  .sub-title{
    font-size: rem(26);
    color: #FFFFFF;
    margin-bottom: rem(24);
  }
  .info-wrap{
    display: flex;
    .info-item{
      & + .info-item{
        margin-left: rem(50);
      }
      &:nth-child(1) {
        .value{
          color: #698B95;
        }
      }
      &:nth-child(2) {
        .value{
          color: #F3AB32;
        }
      }
      &:nth-child(3) {
        .value{
          color: #1D966D;
        }
      }
      .label{
        font-size: rem(20);
        line-height: rem(20);
        color: #698B95;
        margin-bottom: rem(14);
        font-weight: bold;
      }
      .value{
        font-size: rem(50);
        line-height: rem(50);
        color: #F6652C;
        margin-bottom: rem(14);
        font-weight: bold;
      }
      .compare{
        display: flex;
        .compare-label{
          font-size: rem(16);
          line-height: rem(16);
          color: #FFFFFF;
          padding-right: rem(6);
          font-weight: bold;
        }
        .compare-value{
          font-size: rem(16);
          line-height: rem(16);
          color: #05FDBB;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
